import React from 'react'
import { List, Typography, Divider ,Button,Card} from 'antd';
import{connect} from 'react-redux'
const data = [
  'Racing car sprays burning fuel into crowd.',
  'Japanese princess to wed commoner.',
  'Australian walks 100km after outback crash.',
  'Man charged over missing wedding girl.',
  'Los Angeles battles huge wildfires.',
];
class notices extends React.Component{
  constructor(props){
      super(props);
      this.state={

      }
  }
  render(){
      
      return (
        
        
   <Card  extra={
   <Button type='primary' onClick={()=>{
        this.props.dispatch({
        type: "read_all"
      })}
        }
   >全部已读</Button>}>
    <List

      size="large"
      header={<div>Header</div>}
      footer={<div>Footer</div>}
      bordered={true}
      split={true}
      dataSource={data}
      renderItem={item => (
        <List.Item style={{display:'flex',alignContent:'spaced-betwen'}} extra={<Button type='primary' size='small'>&nbsp;已读</Button>}>
          <Typography.Text mark>[ITEM]{item}</Typography.Text> 
        </List.Item>
      )}
    />
    </Card>
       

      );
  }
}

const mapStateToProps=state=>state.storage;
 export default connect(mapStateToProps) (notices)
